<template>
	<div class="container home-box">
		<div class="main-menu">
			<router-link to="/guide">
				<img src="../assets/image/menu_open.png" alt />
			</router-link>
		</div>
		<div class="title">
			<img :src="titlebg" alt />
		</div>
		<div class="upper">
			<div class="upper-left">
				<visitor :userId="userId"></visitor>
			</div>
			<div class="upper-middle">
				<face :userId="userId"></face>
				<cars :userId="userId"></cars>
			</div>
			<div class="upper-right">
				<!--chang clock -->
				<!-- <Map></Map> -->
				<p>{{week}}</p>
				<p>{{wnl}}</p>
				<P>{{wnlyear}}年【{{wnlanimar}}】</P>
				<clock :time="time" class="clock"></clock>
				<!-- <p class="showtext">不忘初心，砥砺前行</p> -->
				<p class="showtext" v-html="welcome" v-bind:style="fontstyle"></p>
				<!--<p class="showtext">莅临指导</p>-->

			</div>
		</div>
		<div class="lower">
			<div class="lower-left">
				<record :userId="userId"></record>
			</div>
			<div class="lower-middle">
				<flux :userId="userId"></flux>
			</div>
			<div class="lower-right">
				<check :userId="userId"></check>
			</div>
		</div>
	</div>
</template>

<script>
	// @ is an alias to /src
	import visitor from "@/components/Visitor.vue";
	import face from "@/components/Face.vue";
	import cars from "@/components/Cars.vue";
	import Record from "@/components/Record.vue";
	import Flux from "@/components/Flux.vue";
	import Check from "@/components/Check.vue";
	import Map from "@/components/Map.vue";
	import clock from "@/components/clock/vue-clock.vue"
	import calendar from '@/assets/js/wnl.js'
	import https from '@/assets/js/https.js'

	export default {
		name: "screen",
		data () {
			return {
				time: '',
				timerID:0,
				amworktime:"08:30",
				pmworktime:"17:30",
				wnl:"",
				week:"",
				wnlyear:"",
				wnlanimar:"",
				titlebg:"",
				imgurl:require("../assets/image/title2.png"),
				imgurl1:require("../assets/image/title3.png"),
				userId:"",
				welcome:"热烈欢迎浙江省公安厅治安总队、金华市公安局领导一行莅临指导",
				fontstyle:{
					fontSize: '13px'
				}
			}
		},
		components: {
			visitor,
			face,
			cars,
			Record,
			Flux,
			Check,
			Map,
			clock
		},
		created(){
			this.userId = this.$route.params.userid
			console.log("params",this.$route.params.id+"###"+this.$route.params.userid)
		},
		mounted(){
			let flag = this.$route.params.id || "1"
			this.titlebg = flag === "1"?this.imgurl:this.imgurl1;
			this.timerID = setInterval(this.updateTime, 1000);
			let cd = new Date();
			this.week = cd.getFullYear()+"-"+(cd.getMonth()+1)+"-"+cd.getDate()+" "+this.dayOfWeek();
			let nljson = calendar.solar2lunar(cd.getFullYear(),cd.getMonth()+1,cd.getDate());
			console.log("date",JSON.stringify(nljson));
			this.wnl = nljson.IMonthCn + nljson.IDayCn
			this.wnlyear = nljson.gzYear
			this.wnlanimar = nljson.Animal
			//获取当前时间
			this.updateTime();
			//获取欢迎词
			this.getWelcome();
		},
		beforeDestroy(){
			if(this.timerID)
				clearInterval(this.timerID);
		},
		methods:{
			updateTime() {
				let cd = new Date();
				this.time = this.zeroPadding(cd.getHours(), 2) + ':' + this.zeroPadding(cd.getMinutes(), 2) + ':' + this.zeroPadding(cd.getSeconds(), 2);

			},
			zeroPadding(num, digit){
				let zero = '';
				for(let i = 0; i < digit; i++) {
					zero += '0';
				}
				return (zero + num).slice(-digit);
			},
			dayOfWeek(){
				let cd = new Date();

				if(cd.getDay() === 0)
					return "星期日";
				else if(cd.getDay() === 1)
					return "星期一";
				else if(cd.getDay() === 2)
					return "星期二";
				else if(cd.getDay() === 3)
					return "星期三";
				else if(cd.getDay() === 4)
					return "星期四";
				else if(cd.getDay() === 5)
					return "星期五";
				else if(cd.getDay() === 6)
					return "星期六";
			},
			getWelcome() {
				let params ={"userId":this.userId}
				let self = this;
				https.fetchGet('/web/manage/setting',params ).then((data) => {
					console.log("data",JSON.stringify(data))
					console.log("data.data",JSON.stringify(data.data))
					if(data.data.content !== undefined && data.data.content !== ""){
						self.fontstyle.fontSize = data.data.fontSize + 'px';
						self.welcome = data.data.content
					}
				}).catch(err=>{
						console.log(err)
					}
				)
			},
		}
	};
</script>
<style lang="scss">
	@import "../styles/index.scss";
	@import "../assets/iconfont/iconfont.css";

	.container {
		color: white;
		position: relative;
	}

	.home-box {
		padding: 16px;
		width: 1280px;
		height: 800px;
		padding: 16px;
		margin: 0 auto;
	}
	.main-menu {
		position: absolute;
		bottom: -5px;
		left: 502px;
		z-index: 100;
		cursor: pointer;
		img {
			width: 70%;
		}
	}

	.title {
		margin-bottom: 10px;
	}
	.upper {
		display: flex;
		margin-bottom: 10px;
	}

	.upper-left {
		width: 268px;
		margin-right: 10px;
		height: 490px;
	}

	.upper-middle {
		width: 630px;
		margin-right: 10px;
		display: flex;
		flex-direction: column;
		height: 490px;
	}

	.upper-right {
		width: 325px;
		height: 490px;
		p{
			font-size: 1.2rem;
			margin-top: 10px;
		}
		.clock{
			margin-top: 20px;
		}
		.showtext{
			margin-top: 3vh;
			font-size: 1.5rem;
			/*渐变背景*/
			background-image: -webkit-linear-gradient(left, #3498db, #f47920 10%, #d71345 20%, #f7acbc 30%,
					#ffd400 40%, #3498db 50%, #f47920 60%, #d71345 70%, #f7acbc 80%, #ffd400 90%, #3498db);
			color: transparent; /*文字填充色为透明*/
			-webkit-text-fill-color: transparent;
			-webkit-background-clip: text;          /*背景剪裁为文字，只将文字显示为背景*/
			background-size: 200% 100%;            /*背景图片向水平方向扩大一倍，这样background-position才有移动与变化的空间*/
			/* 动画 */
			animation: masked-animation 4s infinite linear;
		}
		@keyframes masked-animation {
			0% {
				background-position: 0 0;   /*background-position 属性设置背景图像的起始位置。*/
			}
			100% {
				background-position: -100% 0;
			}
		}
	}

	.lower {
		display: flex;
	}

	.lower-left {
		width: 323px;
		height: 208px;
		margin-right: 10px;
	}

	.lower-middle {
		width: 209px;
		height: 208px;
		margin-right: 10px;
	}

	.lower-right {
		width: 689px;
		height: 208px;
	}
</style>
